import React from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import { InputNumber } from 'antd'
 
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'ZGY4YTNiMjMxYzNkZmRiZmU5MjdjMDY0MzEyZDJhMGZmMGU4ZTZjNjg1MGQzNGZmNDUzYjgyYzkyYTZmYmZhMTBkZDdmMDRjNmFiZDliODZkMTg5ZWMzY2E0MzViOTVjNjdlZjUzMzMxMDk0MzU0NGVhNDUzYmRjNjJhYjAxYmIsZXlKdVlXMWxJam9pZVdGdVp5SXNJbVJoZEdVaU9qRTJPVFF6T0RZNE1EQXNJbVJ2YldGcGJpSTZXeUozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZNQ3dpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lkakV3SWwxOQ==';


class DictionaryEdit extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      columns:[
        {
            title: 'Id',
            type: 'autonumber',
            name: 'id',
            readOnly: true,
            primaryKey: true,
            width: '80px',
        },
        {
            title: 'Name',
            type: 'text',
            name: 'name',
            width: '140px',
        },
        {
            title: 'Photo',
            type: 'image',
            name: 'img',
            width: '80px',
            render: 'round',
        },
        {
            title: 'Department',
            type: 'text',
            name: 'department',
            width: '180px',
            source: ['Marketing','Accounts','General'],
        },
        {
            title: 'Extension',
            name: 'extension',
            width: '120px'
        },
      ],
      data:[],
      beforeValue:1,
      afterValue:1
    }
    this.options = [
      {
        minDimensions: [10, 10]
      }
    ];
    this.wrapper = React.createRef();
  }

  componentDidMount(){
    this.worksheets = jspreadsheet(this.wrapper.current, this.options);
  }

  addRow = function () {
    this.worksheets[0].insertRow();
    console.log(this.worksheets);
  }

  changeBeforeValue = e => {
    this.setState({
      beforeValue:e.target.value
    })
  }

  render(){
    const { data,columns,beforeValue } = this.state;
    const contextMenu = (obj,e,list,optionType) => {
      console.log(obj,e,list,optionType);
      if(optionType === 'header'){
        return false;
      }
      let items = []
      if (obj.options.allowInsertRow == true) {
        items.push({
          title: <div>
            <label>在此前插入</label>
            <InputNumber value={beforeValue} onChange={this.changeBeforeValue} />
            <label>行</label>
          </div>,
          // onclick: function() {
          //   // obj.insertRow(1, parseInt(list), 1)
          //   return false
          // }
        })

        items.push({
          title: '在此后插入行',
          onclick: function() {
            obj.insertRow(1, parseInt(list))
          }
        })
      }

      return items
      
    };
    return (
      <div className="jspreadsheetBox">
        <Spreadsheet ref={this.wrapper} license={license} contextMenu={contextMenu}>
          <Worksheet data={data} columns={columns} minDimensions={[10,10]} worksheetName={"Employees"} />
      </Spreadsheet>
        <p>
          <input type="button" value="Add new row" onClick={() => this.addRow()} className="jss_object" />
        </p>
      </div>
    )
  }

}

export default DictionaryEdit